<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'
import AppNavigation from '@/components/AppNavigation.vue'

const userStore = useUserStore()

const loginForm = ref({
  username: '',
  password: ''
})

const showLoginForm = ref(false)

const onLogin = () => {
  if (loginForm.value.username && loginForm.value.password) {
    // 模拟登录成功
    userStore.login({
      username: loginForm.value.username,
      points: Math.floor(Math.random() * 1000)
    })
    showLoginForm.value = false
  }
}

const onLogout = () => {
  userStore.logout()
}
</script>

<template>
  <div class="profile">
    <van-nav-bar
      title="个人中心"
      fixed
    />
    
    <div class="content">
      <!-- 未登录状态 -->
      <div v-if="!userStore.isLoggedIn" class="login-section">
        <div class="avatar-placeholder">
          <van-image
            src="https://via.placeholder.com/100?text=用户"
            width="80"
            height="80"
            round
          />
        </div>
        
        <p class="login-tip">登录后可以查看您的学习记录和积分</p>
        
        <van-button 
          type="primary" 
          block 
          @click="showLoginForm = true"
          class="login-btn"
        >
          立即登录
        </van-button>
        
        <van-form v-if="showLoginForm" @submit="onLogin" class="login-form">
          <van-field
            v-model="loginForm.username"
            name="username"
            label="用户名"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请输入用户名' }]"
          />
          <van-field
            v-model="loginForm.password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请输入密码' }]"
          />
          <div class="form-btn-group">
            <van-button type="primary" native-type="submit" block>登录</van-button>
          </div>
        </van-form>
      </div>
      
      <!-- 登录状态 -->
      <div v-else class="user-info">
        <div class="user-header">
          <van-image
            src="https://via.placeholder.com/100?text=头像"
            width="80"
            height="80"
            round
          />
          <div class="user-name">{{ userStore.username }}</div>
        </div>
        
        <van-cell-group inset>
          <van-cell title="我的积分" :value="userStore.points + '分'" />
          <van-cell title="学习进度" value="初级" />
          <van-cell title="学习时长" value="0小时" />
        </van-cell-group>
        
        <van-button 
          type="danger" 
          block 
          @click="onLogout"
          class="logout-btn"
        >
          退出登录
        </van-button>
      </div>
    </div>
    
    <AppNavigation />
  </div>
</template>

<style scoped>
.profile {
  padding-top: 46px;
  padding-bottom: 50px;
}

.content {
  padding: 16px;
}

.avatar-placeholder {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

.login-tip {
  text-align: center;
  color: #969799;
  margin-bottom: 20px;
}

.login-btn {
  margin-bottom: 20px;
}

.login-form {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.form-btn-group {
  margin-top: 16px;
}

.user-info {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
}

.user-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}

.user-name {
  font-size: 18px;
  font-weight: bold;
  margin-top: 12px;
}

.logout-btn {
  margin-top: 24px;
}
</style> 